<template>
<div>
	<el-select v-model="value" placeholder="请选择" @change="changeTime">
    <el-option
      v-for="item in time"
      :key="item.value"
      :label="item.label"
      :value="item.val">
    </el-option>
  </el-select>
  <div :id="chartsId" :style="{width: '900px', height: '500px'}" class="my-chart"></div>
</div>
</template>

<style lang="scss" scoped>
div{
    margin: 30px 0;
}
</style>

<script>
export default {
  props: ['chartsId','keyName', 'data', 'name', 'val'],
  data(){
      return {
				value:'',
				month1: [],
				month2: [],
				month3: [],
				month4: [],
				month5: [],
				month6: [],
				active: '',
				time: [],
				cityList: []
			}
  },
  mounted(){
      this.desc();
  },
  watch: {
		data(){
			let getData = this.data;
			console.log('qipao: ', getData);
			let val = this.val;
			let key = [];
			for(let i = 0; i < getData['key值'].length; i++){
				let str = getData['key值'][i];
				key.push(str.substring(str.length-6));
			}
			//清空后赋值time
			this.time = [];
			for(let i = 0; i < key.length; i++){
				let obj = {};
				obj.val = i;
				obj.label = key[i];
				this.time.push(obj);
			}
			let key1 = getData['key值'];
			let name = this.name;
			let varName = '';
			let cityList = [];//top10城市list
			for(let j = 0; j < 6; j++){
				let allData = [];//包含本品竞品，单月份的数组
				for(let i = 0; i < val.length; i++){
					let benpinIndex = i;
					if(i == 0) varName = 'discounts_benpin_' + val[i];
					else varName = 'discounts_jingpin_' + val[i];
					let dataJosn = getData[varName][key1[j]];//单品牌，单月份 十个城市的json
					let dataArr = [];//json转化为数组
					for(let z = 0; z < 10; z++){
						let arr = [];
						let x = z + 1;
						if(!dataJosn[z]) continue;
						if(benpinIndex == 0){
							cityList.push(dataJosn[z].city)
						}
							
						arr.push(x);
						arr.push(dataJosn[z].sales);
						arr.push(Number(dataJosn[z].price));
						dataArr.push(arr);
					}
					
					allData.push(dataArr);
				}
				if(j == 0) this.month1 = allData;
				if(j == 1) this.month2 = allData;
				if(j == 2) this.month3 = allData;
				if(j == 3) this.month4 = allData;
				if(j == 4) this.month5 = allData;
				if(j == 5) this.month6 = allData;
			}
			this.cityList = cityList.slice(0, 10);
			console.log('this.cityList: ', this.cityList);
			let self = this;
			let myChart6 = this.$echarts.init(document.getElementById(this.chartsId));
			let newData = this.month1;
			console.log('newData: ', newData);
			myChart6.setOption({
				legend: {
					data: name
				},
				series: function (){
					let arr = [];
					for(let i = 0; i < val.length; i++){
						let obj = {};
						obj.name = name[i];
						obj.data = newData[i];
						obj.type = 'scatter';
						obj.symbolSize = function (data) {
								return Math.sqrt(data[2]) * 10;
						};
						obj.tooltip = {
							trigger: 'item',
                formatter: function (param) {
										let city;
										for(let i = 0; i < 10; i++){
											let x = i + 1;
											if(param.data[0] == x) city = self.cityList[i]
										}
                    return param.seriesName + '<br/>' + '城市：' + city + '<br/>' + '销量：' + param.data[1] + '<br/>' + '价格：' + param.data[2];
                }
						}
						arr.push(obj);
					}
					return arr;
				}()
			})

		}
  },
  methods: {
		  changeTime(index){
				let item = 'month' + (index + 1);
				let val = this.val;
				let self = this;
				let name = this.name;
				let newData = this[item];
				let myChart6 = this.$echarts.init(document.getElementById(this.chartsId));
				myChart6.setOption({
					series: function (){
					let arr = [];
					for(let i = 0; i < val.length; i++){
						let obj = {};
						obj.name = name[i];
						obj.data = newData[i];
						obj.type = 'scatter';
						obj.symbolSize = function (data) {
								return Math.sqrt(data[2]) * 10;
						};
						obj.tooltip = {
							trigger: 'item',
                formatter: function (param) {
										let city;
										for(let i = 0; i < 10; i++){
											let x = i + 1;
											if(param.data[0] == x) city = self.cityList[i]
										}
                    return param.seriesName + '<br/>' + '城市：' + city + '<br/>' + '销量：' + param.data[1] + '<br/>' + '价格：' + param.data[2];
                }
						}
						arr.push(obj);
					}
					return arr;
				}()
				})
			},
      desc(){
				console.log('气泡图', this.data);
				  let self = this;
					let myChart6 = this.$echarts.init(document.getElementById(this.chartsId));
					
          myChart6.setOption({
            title: {
                text: '城市销量/价格气泡图'
            },
            legend: {
                right: 10,
                data: ['本品', '竞品1', '竞品2']
            },
            xAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                scale: true
            },
						tooltip:{
                trigger: 'item',
                formatter: function (param) {
                    return param.seriesName + '<br/>' + '城市：' + param.data[0] + '<br/>' + '销量：' + param.data[1] + '<br/>' + '价格：' + param.data[2];
                }
            },
            series: []
        })
      }
  }
}
</script>
